<template>
  <div class="mypanel">
    <el-dialog title="新增员工" :visible.sync="dialogVisible" @close="cancel">
      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="姓名" prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入1-30个字符"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker
            v-model="form.timeOfEntry"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select v-model="form.formOfEmployment" placeholder="请选择">
            <el-option
              v-for="item in hireType"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="workNumber">
          <el-input
            v-model="form.workNumber"
            placeholder="请输入1-20个字符"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="部门"
          prop="departmentName"
          class="mydepartmentName"
        >
          <el-input
            v-model="form.departmentName"
            placeholder="请选择"
            @focus="myfocus"
          ></el-input>
          <el-tree
            :data="treeData"
            v-if="showTree"
            :props="{ label: 'name' }"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            class="mytree"
          ></el-tree>
        </el-form-item>
        <el-form-item label="转正时间" prop="correctionTime">
          <el-date-picker
            v-model="form.correctionTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import myData from "@/api/constant/employees";
import { getDeptApi } from "@/api/departments";
import { addEmployeesApi } from "@/api/employees";
export default {
  props: ["dialogVisible"],
  data() {
    return {
      treeData: [],
      showTree: false,
      // 添加规则
      rules: {
        username: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        formOfEmployment: [
          { required: true, message: "请输入聘用形式", trigger: "blur" },
        ],
        workNumber: [
          { required: true, message: "请输入工号", trigger: "blur" },
        ],
        departmentName: [
          { required: true, message: "请输入部门名称", trigger: "change" },
        ],
        timeOfEntry: [
          {
            type: "date",
            required: true,
            message: "请输入入职时间",
            trigger: "blur",
          },
        ],
        correctionTime: [
          {
            type: "date",
            required: true,
            message: "请输入入职时间",
            trigger: "blur",
          },
        ],
      },
      // 保存聘用形式的列表
      hireType: myData.hireType,
      form: {
        username: "", //姓名
        mobile: "", //手机号
        formOfEmployment: "", //聘用形式
        workNumber: "", //工号
        departmentName: "", //组织名称
        timeOfEntry: "", //入职时间
        correctionTime: "", //转正时间
      },
    };
  },
  methods: {
    submit() {
      //  全局验证
      this.$refs.form.validate(async (res) => {
        if (res) {
          // 验证通过
          await addEmployeesApi(this.form);
          // 关闭面板
          this.$emit("update:dialogVisible", false);
          // 清空数据
          this.form = {
            username: "", //姓名
            mobile: "", //手机号
            formOfEmployment: "", //聘用形式
            workNumber: "", //工号
            departmentName: "", //组织名称
            timeOfEntry: "", //入职时间
            correctionTime: "", //转正时间
          };
        //   提示成功
        this.$message({
          message: '新增成功',
          type: 'success'
        });
        // 重新加载数据
        this.$emit('updateData')
        } else {
        }
      });
    },
    //   得到所有部门数据
    async getDept() {
      const res = await getDeptApi();
      this.treeData = this.trunData(res.data.depts, "");
      console.log(res);
    },

    // 将数据转换的嵌套结构
    trunData(arr, pid) {
      const res = [];
      arr.forEach((item) => {
        if (item.pid === pid) {
          const son = this.trunData(arr, item.id);
          if (son.length > 0) {
            item.children = son;
          }
          res.push(item);
        }
      });
      return res;
    },
    cancel() {
      // 关闭面板
      this.$emit("update:dialogVisible", false);
    },
    // 点击树状节点的元素时会触发
    handleNodeClick(data) {
      // 将选中的文本赋值给form中的部门名称
      this.form.departmentName = data.name;
      // 关闭面板
      this.showTree = false;
    },
    myfocus() {
      // 显示tree
      this.showTree = true;
    },
  },
  created() {
    this.getDept();
  },
};
</script>

<style lang='scss' scoped>
.mypanel {
  .mydepartmentName {
    position: relative;
    width: 400px;
    .mytree {
      position: absolute;
      top: 50px;
      left: 0;
      z-index: 9999;
      border: 1px solid #ccc;
      width: 100%;
      border-radius: 6px;
      .el-tree-node_content {
        height: 40px;
      }
    }
  }
}
</style>
